<!-- 更改了js代码及两个下拉选择项103行 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<link rel="shortcut icon" type="image/ico" href="./style/image/ml.ico" /> <!-- 添加 favicon icon -->
<meta name="HandheldFriendly"content="true"/>
<meta http-equiv="x-rim-auto-match" content="none"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<title>立即找房</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="style/css/global.css" rel="stylesheet">
<link href="style/css/common.css" rel="stylesheet">
<script type="text/javascript" src="style/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="style/js/zepto.min.js"></script>
<script type="text/javascript" src="style/js/common.js"></script>
<script src="style/js/mobiscroll.core.js"></script>
<script src="style/js/mobiscroll.frame.js"></script>
<script src="style/js/mobiscroll.scroller.js"></script>
<script src="style/js/mobiscroll.util.datetime.js"></script>
<script src="style/js/mobiscroll.datetimebase.js"></script>
<script src="style/js/mobiscroll.datetime.js"></script>
<script src="style/js/mobiscroll.select.js"></script>
<script src="style/js/mobiscroll.listbase.js"></script>
<script src="style/js/mobiscroll.treelist.js"></script>
<script src="style/js/mobiscroll.i18n.zh.js"></script>
<link href="style/css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />
<link href="style/css/mobiscroll.frame.css" rel="stylesheet" type="text/css" />
<link href="style/css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	$(function(){
		$('#treelist').css('opacity',1)
		$('#demo_select_room').mobiscroll().select({
                    mode: 'scroller',  
                    display: 'modal', 
                    lang:'zh' ,
                });
		var str ='白鹭洲 滨北 槟榔 富山 鼓浪屿 观音山 禾祥西 火车站 会展中心 禾祥东 环岛南路 金鸡亭 莲花 鹭江道 莲前 莲坂 龙山 前埔北区 前埔南区 软件园 瑞景 厦大 松柏 思北 厦港 文灶 文园路 育秀 中山路';
		var str1 ='保税区 东渡 大唐 枋湖 湖边水库片区 后埔 海天路 金尚 江头 机场附近 嘉园路 金山 南山路 SM商圈 五缘湾 翔鹭 祥店 悦华';
		var str2 ='滨海社区 海沧生活区 海沧区政府 龙池开发区 马青路 嵩屿 未来海岸片区 新阳工业区';
			var strArray =str.split(' ');
			var strArray1 =str1.split(' ');
			var strArray2 =str2.split(' ');
			var strHtml ='';
			var strHtml1 ='';
			var strHtml2 ='';
			// console.log(strArray);
			$.each(strArray,function(index,value){
				strHtml+='<li>'+value+'</li>'
			})
			$.each(strArray1,function(index,value){
				strHtml1+='<li>'+value+'</li>'
			})
			$.each(strArray2,function(index,value){
				strHtml2+='<li>'+value+'</li>'
			})
			// console.log(strHtml)
			$('.religion').html(strHtml)
			$('.religion1').html(strHtml1)
			$('.religion2').html(strHtml2)

			var i = Math.floor($('#treelist>li').length / 2),  
        	j = Math.floor($('#treelist>li').eq(i).find('ul li').length / 2);  
    		$("#treelist").mobiscroll().treelist({  
        	mode: 'scroller', 
	    	display: 'modal', 
	    	lang:'zh',  
        	placeholder: '选择地区',  
        	headerText: function (valueText) { return "选择地区"; },  
        	formatResult: function (array) { //返回自定义格式结果  
            	return $('#treelist>li').eq(array[0]).children('span').text() +' '+ $('#treelist>li').eq(array[0]).find('ul li').eq(array[1]).text().trim(' ');  
        	}  
    	});
    	 //上拉加载
    	 	function ajaxLoad(){
    	 		$.ajax({
    	 			type: 'get',
    	 			dataType: 'html',
    	 			url: '',
    	 			beforeSend: function (){
    	 				$('.load_content').css('display','block');
    	 			},
    	 			success: function (data){
    	 				var strObject = JSON.parse(data).rows;
    	 				var rowLength = strObject.length;
    	 				var loadObj = $('.load_content img');
    	 				if(rowLength === 0){
    	 					loadObj.css('display','none');
    	 					$('.load_content').append('<p>没有更多数据了</p>');
    	 					return ;
    	 				};
    	 				var container = $('.room ul');
    	 				HTML =appendContent(data);
    	 				container.append(HTML);
    	 				$('.load_content').css('display','none');
    	 			},
    	 			complete:function (){
    	 				
    	 			},
    	 			error: function (){

    	 			}
    	 		})
    	 	}
    	 	function appendContent(str){
    	 		var html = "";
    	 		for(var i =0; i<=rowLength ;i++){
    	 			html += '<li><a href="#"><div class="img"><img src=' + 
    	 			strObject[i].coverPic + 
    	 			'></div><div class="tip">'+ 
    	 			strObject[i].loupanName +
    	 			'<br><span>' + 
    	 			strObject[i].date + 
    	 			'发布</span></div><div class="txt"><p>'+ 
    	 			strObject[i].loupanName +' '+ 
    	 			strObject[i].houseType + '|'+ 
    	 			strObject[i].loupanAcreage+ '平'+'|' + 
    	 			strObject[i].orientation + '</p><p>' + 
    	 			strObject[i].roomName + '</p><span class="price">' +
    	 			 strObject[i].cost +'元/月</span></div></a></li>'
    	 		}
    	 		return html;
    	 	}

    	 	$(window).on("scroll", function() {
    	 		var container = $('.room ul');
    	 		var windowTop = $(window);
    	 		var topHeight = $('.title');
    	 		var searchHeight = $('.room_search');
    	 		var bottomHeight
    	 		if (container.height() <= windowTop.scrollTop()+windowTop.height()) {
    	 			//加载图片
    	 			ajaxLoad();
    	 		}
    	 	})

	})
</script>
</head>

<body>
<div class="wrap">
	<!--头部-->
	<div class="header w_screen">
		<h1 class="title">立即找房</h1>
		<div class="btn_select_r"><a href="#" class="dj_select">登记需求<i></i></a></div>
		
	</div>

	<!--底部菜单-->
	<div class="bot_nav w_screen">
        <ul>
            <li><a class="on" href="#"><span class="ico_bot_nav_1"></span><p>首页</p></a></li>
            <li><a href="#"><span class="ico_bot_nav_2"></span><p>找房</p></a></li>
            <li><a href="#"><span class="ico_bot_nav_3"></span><p>预看清单</p></a></li>
            <li><a href="#"><span class="ico_bot_nav_4"></span><p>我的</p></a></li>
        </ul>
    </div>

	<!--主体-->

	<div class="main pad_header pad_botnav">
		<div class="room_search w_screen">
			<ul id="treelist" style ='opacity:0'>  
			    <li> 
			        <span>思明区</span>  
			        <ul class ='religion'>  
			           
			        </ul>  
			    </li>  
			    <li>  
			        <span>湖里区</span>  
			        <ul class ='religion1'>  
			           
			        </ul>  
			    </li>  
			    <li>  
			        <span>海沧区</span>  
			        <ul class ='religion2'>  
			           
			        </ul>  
			    </li>
			    <li>  
			        <span>集美区</span>  
			        <ul>  
			            <li>集美文教区</li>  
			            <li>厦门北站商业区</li>  
			            <li>杏林区</li>  
			            
			        </ul>  
			    </li>  
			    <li>  
			        <span>翔安区</span>  
			        <ul>  
			            <li>大嶝岛</li>  
			            <li>马巷</li>  
			            <li>南部新城</li>  
			            <li>翔安新城</li>  
			            
			        </ul>  
			    </li> 
			    <li>  
			        <span>同安区</span>  
			        <ul>  
			            <li>城北</li>  
			            <li>城南</li>  
			            <li>城东</li>  
			            <li>城西</li>  
			            
			        </ul>  
			    </li> 
			</ul>  
			<!-- <select class="room_location"><option>选择位置</option><option>思明区</option><option>湖里区</option></select> -->
			<!-- <select class="room_price"><option>选择租金</option><option>3000-4000元</option></select> -->
			<select name="Cities" id="demo_select_room" data-role="none" >
			    <option value="">选择租金</option>
			    <option value="1">700～1000</option>
			    <option value="2">1000～1300</option>
			    <option value="3">1300～1500</option>
			    <option value="4">1500～2000</option>
			    <option value="4">2000以上</option>
			</select>  
		</div>

		<div class="room">
			<ul>
				<li>
					<a href="#">
						<div class="img"><img src="style/images/img_room_big.jpg"></div>
						<div class="tip">新景花园<br><span>05-31发布</span></div>
						<div class="txt">
							<p>新景花园　3室1厅2卫 | 120平 | 精装 | 朝南</p>
							<p>Room1：射鸡狮　Room2：程序猿</p>
							<span class="price">1380元/月</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="img"><img src="style/images/img_room_big.jpg"></div>
						<div class="tip">新景花园<br><span>05-31发布</span></div>
						<div class="txt">
							<p>新景花园　3室1厅2卫 | 120平 | 精装 | 朝南</p>
							<p>Room1：射鸡狮　Room2：程序猿</p>
							<span class="price">1380元/月</span>
						</div>
					</a>
				</li>
			</ul>
			<div class ='load_content'>
				<img src="./style/images/lo.gif" >
			</div>
		</div>
	</div>
</div>

<div class="wrap_bg w_screen"></div>
</body>
</html>